<template>
    <a-card style="padding:20px">
        <div class="flex_box">
            <div class="flex"  v-for="(itm,idx) in ToolTitle" :key="idx">
                <div class="item_box">
                    <div class="item" @click="handleClick(itm,idx)">{{idx+1}}、{{ itm.title }}</div>
                </div>
            </div>
        </div>
        <!-- 转移订单记录 -->
        <transformOrder ref="transformOrderRef"></transformOrder>
        <!-- 更新订单支付状态  -->
        <updatePayState ref="updatePayStateRef"></updatePayState>
        <!--更换退换货售后状态  -->
        <updateAftersaleState ref="updateAftersaleStateRef"></updateAftersaleState>
          <!--修改退货售后记录  -->
        <updateBackRecord ref="backRecordRef"></updateBackRecord>
         <!--修改退货售后记录  -->
         <updateExRecord ref="exRecordRef"></updateExRecord>
         <!-- 修改手机号 -->
          <updatePhone ref="phoneRef"></updatePhone>
    </a-card>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
const transformOrderRef = ref()
const updatePayStateRef = ref()
const updateAftersaleStateRef = ref()
const backRecordRef = ref()
const exRecordRef = ref()
const phoneRef=ref()
import updateAftersaleState from './updateAftersaleState.vue'
import transformOrder from './transformOrder.vue';
import updatePayState from './updatePayState.vue';
import updateBackRecord from './updateBackRecord.vue'
import updateExRecord from './updateExRecord.vue'
import updatePhone from './updatePhone.vue'
const ToolTitle = ref([
    { title: '转移订单(代付)记录' },
    { title: '更新订单支付状态' },
    { title: '修改退货售后记录' },
    { title: '修改换货售后记录' },
    { title: '修改实名认证手机号' },
    { title: '更新退换货售后状态' },
])
const handleClick = (item, index) => {
    if (index == 0) {//转移订单(代付)记录
        transformOrderRef.value?.open()
    } else if (index == 1) { //更新订单支付状态
        updatePayStateRef.value?.open()
    } else if (index == 2) {//修改退货售后记录
        backRecordRef.value?.open()
    } else if (index == 3) {//修改换货售后记录
        exRecordRef.value?.open()
    } else if (index == 4) {//修改实名认证手机号
        phoneRef.value?.open()
    } else if (index == 5) {//更新退换货售后状态
        updateAftersaleStateRef.value?.open()
    } 
}
</script>
<style scoped lang="less">
.flex_box{
    width:100%;
    display: flex;  
    justify-content: space-between;
    flex-wrap: wrap;
    .flex{
        width:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        cursor: pointer;
        .item_box{
            
            .item{
                width: 350px;
                line-height: 30px;
                padding:6px;
                text-align: left;
                background-color:#748ffc;
                font-size: 16px;
                border-radius: 8px;
                cursor: pointer;
                color:#fff;
                padding-left:10px;
            }
            .item:hover{
                background-color:#eda553 ;
                color:#fff;
            }
        }
    }
}
</style>